<template>
  <div>
    <a-card style="padding: 2%">
      <div v-if="showType == SHOW_TYPE_ENUM.SHOW_TYPE_LIST">
        <h1 style="font-size: 28px">角色管理</h1>
        <a-row :gutter="20">
          <a-col :span="9">
            <a-form-item label="查询角色" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
              <a-input v-model:value="queryContent" placeholder="请输入要查询的内容"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button @click="initQueryData" type="primary" block>
              <SearchOutlined/>
              搜索
            </a-button>
          </a-col>
          <a-col :span="4">
            <a-button @click="resetData" block>
              <SyncOutlined/>
              重置
            </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="4">
            <a-button @click="createRole" type="primary" block>
              新建
            </a-button>
          </a-col>
          <a-col :span="4">
            <a-button @click="exportFile" type="primary" block>
              下载
            </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="24" style="margin-top: 30px;">
            <a-table :columns="columns"
                     :row-key="record => record.id"
                     :data-source="dataList"
                     :pagination="pageOptions"
                     :loading="isLoading"
            >
              <template #status="{ record }">
                <div>
                  {{record.status == 0 ? '正常':'停用'}}
                </div>
              </template>
              <template #action="{ record }">
                <a-button type="link" @click="detailData(record)">
                  <UnorderedListOutlined/>
                  详情
                </a-button>
              </template>
            </a-table>
          </a-col>
        </a-row>
      </div>
      <div v-if="showType == SHOW_TYPE_ENUM.SHOW_TYPE_DETAIL">
        <RoleDetail :view-type="showType" :item="selectItem" @my-emit="callBack"></RoleDetail>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts">
  import {defineComponent, onMounted, onUnmounted, toRefs} from '@vue/runtime-core';
  import {columns} from "/@/views/core/role/roleIndex";
  import {reactive} from "vue";
  import {SHOW_TYPE_ENUM} from "/@/enums/viewTypeEnum";
  import {HttpQueryResult} from "/@/api/core/model/coreModel";
  import {queryRoleList} from "/@/api/core/role";
  import {message} from "ant-design-vue";
  import {CoreUtils} from "/@/utils/coreUtils";
  import RoleDetail from './roleDetail.vue'

  export default defineComponent({
    components: {
      RoleDetail
    },
    props: {
      total: {
        type: Number,
        default: 0,
      },
      current: {
        type: Number,
        default: 1,
      },
      pageSize: {
        type: Number,
        default: 15,
      }
    },
    setup(props, {}) {

      const data = reactive({
        showType: SHOW_TYPE_ENUM.SHOW_TYPE_LIST,
        selectItem: null,
        queryContent: '',
        dataList: [] as any[],
        isLoading: false,
        pageOptions: {
          total: props.total,
          current: props.current,
          pageSize: props.pageSize,
          pageSizeOptions: ['15', '30', '50', '100'],
          showSizeChanger: true,  // 显示可改变每页数量
          showQuickJumper: false, // 是否显示跳转
          showTotal: (total: any) => `共 ${total} 条`, // 显示总数
          onChange: (current: any, pageSize: any) => {
            paginationChange({current: current, pageSize: pageSize});
          },
          onShowSizeChange: (current: any, pageSize: any) => {
            paginationChange({current: current, pageSize: pageSize});
          },
        }
      });

      const paginationChange = (pageData?: any) => {
        data.pageOptions.current = pageData.current;
        data.pageOptions.pageSize = pageData.pageSize;
        queryData();
      };

      // 查询
      const queryData = () => {
        data.isLoading = true;
        data.dataList = [];
        queryRoleList({
          query_type: 0,
          query_content: data.queryContent,
          page_index: data.pageOptions.current,
          page_size: data.pageOptions.pageSize,
        }).then((result: HttpQueryResult) => {
          data.isLoading = false;
          if (result.code == 0) {
            data.pageOptions.total = result.data.total_size;
            data.dataList = result.data.data;
          }
        });
      };
      // 手动查询，需要重置起始页
      const initQueryData = () => {
        data.pageOptions.current = 1;
        queryData();
      };
      // 重置
      const resetData = () => {
        data.queryContent = '';
        data.pageOptions.current = 1;
        queryData();
      };

      // 新建
      const createRole = () => {
        message.warn("暂未开放，敬请期待");
      };
      // 下载
      const exportFile = () => {
        message.warn("暂未开放，敬请期待");
      };
      // 详情
      const detailData = (item) => {
        data.selectItem = item;
        data.showType = SHOW_TYPE_ENUM.SHOW_TYPE_DETAIL;
      };

      // Emit
      const callBack = (item) => {
        CoreUtils.console_log(item);
        data.showType = SHOW_TYPE_ENUM.SHOW_TYPE_LIST;
        queryData();
      }

      onMounted(() => {
        queryData();
      });

      // 销毁
      onUnmounted(() => {

      });

      return {
        ...toRefs(data),
        SHOW_TYPE_ENUM,
        columns,
        initQueryData,
        resetData,
        createRole,
        exportFile,
        detailData,
        callBack,
      };
    },
  });
</script>

<style scoped></style>
